<template>
  <div>
    <i-form ref="form" :model="formValidate" :rules="ruleValidate">
      <i-form-item label="用户名" prop="name">
        <i-input v-model="formValidate.name"></i-input>
      </i-form-item>
      <i-form-item label="邮箱" prop="mail">
        <i-input v-model="formValidate.mail"></i-input>
      </i-form-item>
    </i-form>
    <button @click="onSubmit">submit</button>
    <button @click="onReset">Reset</button>
  </div>
</template>
<script>
  import iForm from '@/components/i-form.vue';
  import iFormItem from '@/components/i-form-item.vue';
  import iInput from '@/components/i-input.vue';

  export default {
    components: { iForm, iFormItem, iInput },
    data () {
      return {
        formValidate: {
          name: '123',
          mail: ''
        },
        ruleValidate: {
          name: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
        onSubmit(){
            this.$refs.form.validate().then(res => {
                console.log(res)
                console.log(this.formValidate)
            })
        },
        onReset(){
            this.$refs.form.resetFields()
        }
    }
  }
</script>